<template>
  <div class="leftonewrap">
        <div class="top">
                <div class="leftthree" v-for="(datanum,index) in datanums" :key="index">
                    <p class="num">{{datanum.num}}</p>
                    <p class="name">{{datanum.name}}</p>
                </div>
        </div>
      <div class="bottom">
          <span class="spanthree" v-for="(dataaccount,index) in dataaccounts" :key="index">
              <span class="name">{{dataaccount.name}}：</span>
              <span class="num">{{dataaccount.num}}</span>
          </span>
      </div>
  </div>
</template>

<script>
import {getLeftOne} from "../assets/api/twoapi"
export default {
    data() {
            return {
                datanums:[
                    // {
                    //     num:100,
                    //     name:"接入用户数"
                    // },{
                    //     num:30,
                    //     name:"PC"
                    // },{
                    //     num:70,
                    //     name:"移动端"
                    // },{
                    //     num:100,
                    //     name:"接入用户数"
                    // },{
                    //     num:30,
                    //     name:"PC"
                    // },{
                    //     num:70,
                    //     name:"移动端"
                    // }
                ],
                dataaccounts:[
                    // {
                    //     num:100,
                    //     name:"接入用户数"
                    // },{
                    //     num:30,
                    //     name:"PC"
                    // },{
                    //     num:70,
                    //     name:"移动端"
                    // }
                ],
                timer:null,
                
            }
    },
    created(){
        this.fetchData()
        this.timer = setInterval(() => {
        this.fetchData()
        }, this.howtimeout)
    },
    destroyed() {
        clearInterval(this.timer)
    },
    mounted(){
        this.fetchData();
    },
    methods:{
        fetchData() {
            getLeftOne().then((res)=>{
                this.datanums=res.data.result[0].firstline;
                this.dataaccounts=res.data.result[0].secondline;
            });
        },
    }
}
</script>

<style lang="less" scoped>
p {
    margin: 0;
    padding: 0;
}
.leftonewrap{
    text-align: center; 
    width: 942px;
    height: 200px;
    margin: 0 auto;
    .top{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .leftthree {
            background-image: url('../assets/icons/data.png');
            background-position-y: -16px;
            background-repeat: no-repeat;
            margin: 0 7px;
            height: 154px;
            width: 143px;
            font-family: PingFang-SC-Heavy;
            .num {
                padding-top: 25px;
                font-size: 33px;
                line-height: 9px;
                color: #ffec6a;
            }
            .name {
                margin-top: 50px;
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
            }
        }
    }
    .bottom {
        .spanthree {
            display: inline-block;
            width: 310px;
        }
        .name {
            font-size: 25px;
            color: #a4d6ff;
            vertical-align: text-bottom;
        }
        .num {
            font-size: 30px;
            color: #f4d052;
        }
    }
}
</style>